import { GlobalValue } from "@/GlobalValue";
import { StarTwoTone } from "@ant-design/icons";
import { Space } from "antd";
import React from "react";
import styles from "./style.module.scss";

export interface INavItemLabelProps<T extends string> {
  label: string;
  path: T;
  is_page: (path: T) => boolean
}
const twoToneColor: [string, string] = ['#AAAA00', 'yellow']
export function NavItemLabel<T extends string>(props: INavItemLabelProps<T>) {
  const { label, path, is_page } = props;
  const [{ favorite_nav_paths }, set_value] = GlobalValue.use();
  const is_favorite = favorite_nav_paths.indexOf(path) >= 0;
  return (
    <Space className={styles.nav_item_label}>
      {label}
      {
        is_page(path) ?
          <StarTwoTone
            twoToneColor={twoToneColor}
            className={is_favorite ? styles.nav_item_label_star_1 : styles.nav_item_label_star_0}
            onClick={(e) => {
              const next_favorite_nav_paths = is_favorite ?
                favorite_nav_paths.filter(v => v !== path) :
                [...favorite_nav_paths, path];
              set_value('favorite_nav_paths', next_favorite_nav_paths)
              e.stopPropagation();
              e.preventDefault();
            }} /> : null
      }
    </Space>
  )
}
NavItemLabel.is = function <T extends string = string>(v: React.ReactElement): v is React.ReactElement<INavItemLabelProps<T>> {
  return v.type === NavItemLabel;
}